
import React, { Component } from 'react';
import { use_resgist } from '../../utils/api';
import { withRouter } from 'react-router-dom';
import { Link } from 'react-router-dom';

class register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      pass: "",
      checkpass: "",
    }
  }

  //事件接收e 实时更新页面设置input框的值
  handleChange(e) {
    this.setState({
      [e.currentTarget.name]: e.currentTarget.value,
    })
  }
  //点击注册，发请求
  userigist() {
    console.log(this.state);
    if (this.state.phone && this.state.pass && this.state.checkpass) {
      //发送注册请求
      var { checkpass, ...params } = this.state;
      use_resgist(params).then((res) => {
        // console.log(res);
        this.props.history.push("/logo")
      })
    }

  }
  render() {
    return (
      <div className='register'>
        <div className="inp">
          <h2>注册</h2>
        </div>
        {/* 表单元素 受控组件，需要输入的时候页面的值进行实时绑定更新，需要在表单上设置name + defaultValue + onChange */}
        <div className="inp">
          <input type="text"
            placeholder='请输入账号'
            name='phone'
            defaultValue={this.state.phone}
            onChange={(e) => { this.handleChange(e) }} />
        </div>
        <div className="inp">
          <input type="password"
            name='pass'
            defaultValue={this.state.pass}
            placeholder='请输入密码'
            onChange={(e) => { this.handleChange(e) }} />
        </div>
        <div className="inp">
          <input type="password"
            name='checkpass'
            defaultValue={this.state.checkpass}
            placeholder='确认密码'
            onChange={(e) => { this.handleChange(e) }} />
        </div>
        <div className="inps">
          <div className='titlesas'>
            <Link to={"/logo"}>已有账号?去登陆</Link>
          </div>
          <input type="button" value="注册" onClick={() => { this.userigist() }} />
        </div>
      </div>
    );
  }
}

export default withRouter(register);